<template>
  <view class="h-right2">
    <title-bar title="实时报警信息"></title-bar>
    <view class="list">
      <view class="title">
        <view class="ls1">类型</view>
        <view class="ls2">报警内容</view>
        <view class="ls3">传感器</view>
        <view class="ls4">报警时间</view>
        <view class="ls5">位置</view>
      </view>
      <!-- disable-touch禁止用户 touch swiper 否则数据少时dom会掉下来 -->
      <swiper
        class="grid"
        disable-touch="true"
        circular="true"
        vertical="true"
        display-multiple-items="5"
        :autoplay="autoplay"
        interval="2000"
        duration="300"
      >
        <swiper-item
          v-for="(item, index) in listData"
          :key="index"
          class="line"
		  :class="{'lineActive':chooseIndex==index}"
		  @tap="selectAddress(item,index)"
          @mouseover="enter"
          @mouseout="out"
        >
          <view class="ls1">
            <image :src="stateImageUrl[item.status]"></image>
          </view>
          <view class="ls2" :data-li="item.pointData">
            {{ item.pointData}}</view
          >
          <view class="ls3" :data-li="item.deviceTypeName">
            {{ item.deviceTypeName }}
          </view>
          <view class="ls4" :data-li="item.alarmTime">
            {{ itemAlarmTime[index] }}
          </view>
          <view class="ls5" :data-li="item.addressDesc">
            <img
              :data-li="item.addressDesc"
              class="img"
              :src="require('../../static/place.png')"
              alt=""
            />
          </view>
        </swiper-item>
      </swiper>
      <None v-if="listData.length <= 0" text="暂无实时报警信息" top="10%"></None>
    </view>
  </view>
</template>

<script>
import TitleBar from "./TitleBar.vue";
export default {
  name: "homeleft",
  components: { TitleBar },
  data() {
    return {
      listData: [],
      autoplay: true,
      stateImageUrl: [
        "/static/fault-icon.png",
        "/static/alarm-icon.png",
        "",
        "",
        "/static/offline-icon.png",
      ],
	  chooseIndex:-1
    };
  },
  created() {
	  let self=this
	  self.getList();
	  //刷新
	  uni.$on('globalRefresh',function(data){
	  	self.getList();
	  })
  },
  computed: {
    itemAlarmTime: function () {
      return this.listData.map((element) => {
        return element.alarmTime ? element.alarmTime.split(" ")[0] : "无";
      });
    },
  },
  methods: {
	selectAddress(item,index) {
		//触发地图中心点切换
		if(JSON.parse(uni.getStorageSync('user')).aioHomePageType!=1){
			this.chooseIndex=index
			if(item.latLud){
				uni.$emit('selectedAddress',{latLud:item.latLud})
			}
		}
	},
	async getList(){
		let that = this;
		let objData = [];
		let lastDay7 = this.getDay(30);
		let beginAlarmTime = lastDay7[0] + " 00:00:00";
		let endAlarmTime = lastDay7[29] + " 23:59:59";
		let netWorkFlag= await this.$help.getNetWork()
		if (netWorkFlag) {
		  let res = await this.$api.listDeviceAlarmDispose({
		    pageNum: 1,
		    pageSize: 200,
		    confirm: 0,
			beginAlarmTime,
			endAlarmTime
		  });
		  res.data.list.forEach((i) => {
		    objData.push({
		      visible: true,
		      status: i.status,
		      pointData: i.pointData,
		      deviceTypeName: i.deviceTypeName,
		      alarmTime: i.alarmTime,
		      messageId: i.messageId,
		      addressDesc: i.addressDesc,
			  latLud:i.latLud
		    });
		  });
		  that.$help.updateData(
		    that.$db,
		    objData,
		    "name",
		    "listDeviceAlarmDispose"
		  );
		} else {
		  objData = await that.$help.getLocalData(
		    that.$db,
		    "name",
		    "listDeviceAlarmDispose"
		  );
		  if (!objData) {
		    objData = [];
		  }
		}
		this.listData = objData;
	},
    enter(e) {
      this.autoplay = false;
      let dom = e.target;
      let data = "";
      let set = dom.dataset.li;
      if (set) {
        data = set;
        if (set === "li2") {
          data = "12楼";
        }
        this.$bus.$emit("show-tooltip", [
          {
            type: 0,
            text: data,
          },
          e.pageX,
          e.pageY,
        ]);
      }
    },
    out() {
      this.$bus.$emit("hide-tooltip");
      this.autoplay = true;
    },
    /**
     * @description: 返回最近今天的日期数组
     * @param { Number } day :默认七天
     * @return { String }
     */
    getDay(day = 7) {
      let days = [];
      for (let i = 0; i <= 24 * (day - 1); i += 24) {
        //今天加上前6天
        let dateItem = new Date(new Date().getTime() - i * 60 * 60 * 1000); //使用当天时间戳减去以前的时间毫秒（小时*分*秒*毫秒）
        let y = dateItem.getFullYear(); //获取年份
        let m = dateItem.getMonth() + 1; //获取月份js月份从0开始，需要+1
        let d = dateItem.getDate(); //获取日期
        m = this.addDate0(m); //给为单数的月份补零
        d = this.addDate0(d); //给为单数的日期补零
        let valueItem = y + "-" + m + "-" + d; //组合
        days.unshift(valueItem); //添加至数组
      }
      return days;
    },
    /**
     * @description: 给个位数时间加0
     * @param { Data } time :时间戳
     * @return { String }
     */
    addDate0(time) {
      if (time.toString().length === 1) {
        time = "0" + time.toString();
      }
      return time;
    }
  },
};
</script>

<style lang="scss" scoped>
.h-right2 {
  width: 5rem;
  height: 31%;
  font-size: 0.175rem;
  .list {
    position: relative;
    display: flex;
    backdrop-filter: blur(5px);
    height: calc(100% - 0.425rem);
    flex-direction: column;
    justify-content: center;
    padding: 0.2rem 0.2rem;
    overflow: hidden;
    background-color: rgba(19, 117, 216, 0.1);
    .title {
      font-size: 0.175rem;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgb(50, 207, 231);
      line-height: 0.45rem;
      background: linear-gradient(
        180deg,
        rgba(0, 55, 88, 0.363) 0%,
        rgba(0, 49, 82, 0.29) 100%
      );
      display: flex;
    }
    .grid {
      overflow: hidden;
	  height: 80%;
      color: rgba(255, 255, 255, 0.7);
      .line {
        height: 0.45rem !important;
        display: flex;

        uni-view {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          line-height: 0.45rem;
        }
      }
      .line:nth-child(2n) {
        background: linear-gradient(
          180deg,
          rgba(0, 55, 88, 0.363) 0%,
          rgba(0, 49, 82, 0.29) 100%
        );
      }
      .line:hover,.line.lineActive {
        cursor: pointer;
        background: linear-gradient(
          180deg,
          rgba(0, 107, 173, 0.73) 0%,
          rgba(0, 49, 82, 0.57) 100%
        );
      }
    }
  }
  .ls1 {
    width: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    > image {
      width: 0.25rem;
      height: 0.25rem;
    }
  }
  .ls2 {
    width: 1rem;
    text-align: center;
    padding-right: 0.0625rem;
  }
  .ls3 {
    width: 1.35rem;
    padding-right: 0.075rem;
  }
  .ls4 {
    width: 1.2rem;
    padding-right: 0.0625rem;
  }
  .ls5 {
    width: 0.45rem;
    text-align: center;
    margin-top: 0.025rem;
    .img {
      width: 0.15rem;
      height: 0.2rem;
    }
  }
}
</style>
